<div class="row">
  <div class="col-span-2">
    <ql-card body-style="height:240px;overflow-y:auto">
      <ng-template #header>
        <div class="clearfix">
          <ql-checkbox [(model)]="ischecked"  [checked]="ischecked" (modelChange)="onCheckChange($event,true)" > {{leftDataLen}}/{{leftDataLenAll}}项</ql-checkbox>
          <span style="float: right;">可选列表</span>
        </div>
      </ng-template>
      <ql-input placeholder="请输入搜索内容" icon="search"  [(ngModel)]="searchLeft" (ngModelChange)="lowQuery(true)" ></ql-input>
        <div *ngFor="let item of leftList" class="text item"  style="margin-top: 4%">
          <ql-checkbox  [qlDisabled]="item.disabled" [(ngModel)]="item.checked" [checked]="item.checked"  (modelChange)="onCheck($event,item,true)"  label="{{item.key}}">{{item.value}}</ql-checkbox>
        </div>
    </ql-card>
  </div>
  <div class="col-span-1">
    <div class="row-span-1" style="margin-top: 63%;
    margin-left: 34%;">    <ql-button size="small"   (click)="checkChange(false)"type="primary" [qlDisabled]="isdisable"><i class="ql-icon-arrow-left"></i></ql-button>
      <!--<ql-button size="small" (click)="left()"  *ngIf="!ischeck"><i class="ql-icon-arrow-left"></i></ql-button>-->
    </div>
    <div class="row-span-1"  style="
    margin-left: 34%;">  <ql-button size="small" (click)="checkChange(true)"  type="primary" [qlDisabled]="isdisable2"><i class="ql-icon-arrow-right"></i></ql-button></div>
  </div>
  <div class="col-span-2">
    <ql-card body-style="height:240px;overflow-y:auto">
      <ng-template #header>
        <div class="clearfix">
          <ql-checkbox [(model)]="ischecked2"  [checked]="ischecked2"(modelChange)="onCheckChange($event,false)"> {{rightDataLen}}/{{rightDataLenAll}}项</ql-checkbox>
          <span style="float: right;">已选列表</span>
        </div>
      </ng-template>
      <ql-input placeholder="请输入搜索内容" icon="search"  [(ngModel)]="searchRight" (ngModelChange)="lowQuery(false)"></ql-input>
      <div *ngFor="let item of rightList" class="text item" style="margin-top: 4%">
          <ql-checkbox  [qlDisabled]="item.disabled" [(ngModel)]="item.checked"  [checked]="item.checked"  (modelChange)="onCheck($event,item,false)" label="{{item.key}}">{{item.value}}</ql-checkbox>
        </div>
    </ql-card>
  </div>
</div>
